<script>
// import { reactive } from "vue";
// import { useTzRouter } from "@/vhooks/useTzRouter";
// import { getDicMap } from "@/utils/storage";

export default {
  name: "RecordList",
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    // 左侧 cell 数据
    cellList: {
      type: [Array, Function],
      default: () => [],
    },
    // 列表项右侧配置数据
    cellRightDataConfig: {
      type: [Object, Function],
      default: () => ({
        keyName: "", // 按钮 keyName  具体搜索 statusConfig
        statusName: "", // 状态名
        statusColor: "", // 状态名颜色 orange green red gray
      }),
    },
  },
  emits: ["btnClick", "itemClick"],
  setup(props, { emit }) {
    // 获取列表项右侧按钮
    const fetchHandleBtn = (item, keyName = "") => {
      // 状态对应的操作按钮
      const statusConfig = {
        delete: {
          btnName: "删除",
        },
        receipt: {
          btnName: "查看回执",
        },
        receiptAndShot: {
          btnName: "回执/截图",
        },
      };

      if (!statusConfig[keyName]) return;

      const { btnName } = statusConfig[keyName];

      const handleClick = (data, event) => {
        event.stopPropagation();
        emit("btnClick", { hanldeName: keyName, data });
      };

      return btnName ? (
        <tz-view
          class={keyName === "delete" ? "close-btn" : ""}
          onClick={(e) => handleClick(item, e)}
        >
          {keyName === "delete" ? <tz-icon name="close-plain"></tz-icon> : ""}
          {btnName}
        </tz-view>
      ) : (
        ""
      );
    };

    const listItemClick = (data) => {
      emit("itemClick", data);
    };

    const cellRender = (item) => {
      const cellList =
        typeof props.cellList === "function"
          ? props.cellList(item)
          : props.cellList;

      return cellList.map((cellItem) => (
        <tz-cell
          class={[
            cellItem.mainCode && "main-code",
            cellItem.greenValue && "green-value",
          ]}
          title={cellItem.title}
        >
          {cellItem.value}
        </tz-cell>
      ));
    };

    // 列表项右侧操作区域
    const operationAreaRender = (itemData) => {
      const { keyName, statusName, statusColor } =
        typeof props.cellRightDataConfig === "function"
          ? props.cellRightDataConfig(itemData)
          : props.cellRightDataConfig;

      return (
        <tz-view class="operation-area">
          <tz-view class={["status-name", statusColor]}>{statusName}</tz-view>
          <tz-view class="handle-btn-content">
            {fetchHandleBtn(itemData, keyName)}
          </tz-view>
        </tz-view>
      );
    };

    return () => {
      return (
        <tz-view class="record-list">
          {props.dataList.map((item) => (
            <tz-view
              class="data-list-item"
              key={item.consistId}
              onClick={() => listItemClick(item)}
            >
              <tz-view class="info-area">{cellRender(item)}</tz-view>
              {operationAreaRender(item)}
            </tz-view>
          ))}
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.record-list {
  width: 100%;
  .data-list-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;

    &:nth-child(odd) {
      background-color: $help-color;
    }

    &:active {
      background-color: $border-color;
    }

    .info-area {
      // width: 60%;
      .tz-cell {
        font-size: 12px;
        line-height: 20px;
        margin-left: 5px;
        .tz-cell-label {
          width: auto;
          padding-right: 16px;
          color: $title-color3;
        }
        &.main-code {
          font-size: 24px;
          color: $primary-color;
          margin-bottom: 6px;
          margin-left: 0;
        }
        // 绿色高亮 value 文案
        &.green-value {
          .tz-cell-value {
            color: $success-color-end;
            font-size: 14px;
          }
        }
      }
    }
    .operation-area {
      // width: 20%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .status-name {
        font-size: 18px;
        &.gray {
          color: $info-color;
        }
        &.green {
          color: $success-color-end;
        }
        &.orange {
          color: $warning-color;
        }
        &.red {
          color: $danger-color;
        }
      }
      .handle-btn-content {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: $primary-color-active;
        .close-btn {
          display: flex;
          align-items: center;
          flex-direction: column;
          color: $danger-color;
        }
      }
    }
  }
}
</style>
